<template>
  <div class="container" ref="container">
    <topo class="topo"></topo>
    <div class="top">
      <h4>上级单位</h4>
    </div>
    <div class="line"></div>
    <!-- 中间大边框 -->
    <div class="content-c">
      <div class="title-wk">
        <span class="title">核心交换域</span>
      </div>
    </div>
    <!--  中下边框  -->
    <div
      :class="[
        'content-cb',
        status.insDomStatus != 'none' ? status.insDomStatus : '',
      ]"
    >
      <div class="title-wk">
        <span class="title">院内用户终端域</span>
        <el-popover
          v-if="status.insDomStatus != 'none'"
          placement="top"
          trigger="hover"
        >
          <PopoverStatus
            :data="labelStatus"
            :status="status.insDomStatus"
          ></PopoverStatus>
          <div slot="reference" class="conSpan">
            <i
              :class="[
                'el-icon-warning',
                'icon-warning-' + status.insDomStatus,
              ]"
            ></i>
          </div>
        </el-popover>
      </div>
      <div class="count" v-if="topoData.insDom">
        <div
          v-if="
            topoData.outDom.hostAssets && topoData.insDom.hostAssets.total > 0
          "
          class="count-radius"
          :title="topoData.insDom.hostAssets.total"
          @click="handleCount(topoData.insDom.id,topoData.insDom.hostAssets.assetType)"
        >
          {{ topoData.insDom.hostAssets.total>999?'999+':topoData.insDom.hostAssets.total }}
        </div>
      </div>
    </div>
    <!--   左上边框  -->
    <div
      :class="[
        'content-lt',
        status.secDomStatus != 'none' ? status.secDomStatus : '',
      ]"
    >
      <div class="title-wk">
        <span class="title">安全管理域</span>
        <el-popover
          v-if="status.secDomStatus != 'none'"
          placement="top"
          trigger="hover"
        >
          <PopoverStatus
            :data="labelStatus"
            :status="status.secDomStatus"
          ></PopoverStatus>
          <div slot="reference" class="conSpan">
            <i
              :class="[
                'el-icon-warning',
                'icon-warning-' + status.secDomStatus,
              ]"
            ></i>
          </div>
        </el-popover>
      </div>
      <div class="count" v-if="topoData.secDom">
        <div
          v-if="topoData.secDom.serverAssets.total > 0"
          class="count-radius count-radius-service"
          :title="topoData.secDom.serverAssets.total"
          @click="handleCount(topoData.secDom.id,topoData.secDom.serverAssets.assetType)"
        >
          {{ topoData.secDom.serverAssets.total>999?'999+':topoData.secDom.serverAssets.total }}
        </div>
        <div
          v-if="topoData.secDom.securityAssets.total > 0"
          class="count-radius count-radius-safe"
          :title="topoData.secDom.securityAssets.total"
          @click="handleCount(topoData.secDom.id,topoData.secDom.securityAssets.assetType)"
        >
          {{ topoData.secDom.securityAssets.total>999?'999+':topoData.secDom.securityAssets.total }}
        </div>
      </div>
    </div>
    <!--   左下边框  -->
    <div
      :class="[
        'content-lb',
        status.appDomStatus != 'none' ? status.appDomStatus : '',
      ]"
    >
      <div class="title-wk">
        <span class="title">应用资源域</span>
        <el-popover
          v-if="status.appDomStatus != 'none'"
          placement="top"
          trigger="hover"
        >
          <PopoverStatus
            :data="labelStatus"
            :status="status.appDomStatus"
          ></PopoverStatus>

          <div slot="reference" class="conSpan">
            <i
              :class="[
                'el-icon-warning',
                'icon-warning-' + status.appDomStatus,
              ]"
            ></i>
          </div>
        </el-popover>
      </div>
      <div class="count" v-if="topoData.appDom">
        <div
          v-if="topoData.appDom.softAssets.total > 0"
          class="count-radius count-radius-soft"
          :title="topoData.appDom.softAssets.total"
          @click="handleCount(topoData.appDom.id,topoData.appDom.softAssets.assetType)"
        >
          {{ topoData.appDom.softAssets.total>999?'999+':topoData.appDom.softAssets.total }}
        </div>
        <div
          v-if="topoData.appDom.securityAssets.total > 0"
          class="count-radius count-radius-safe"
          :title="topoData.appDom.securityAssets.total"
          @click="handleCount(topoData.appDom.id,topoData.appDom.securityAssets.assetType)"
        >
          {{ topoData.appDom.securityAssets.total>999?'999+':topoData.appDom.securityAssets.total }}
        </div>
        <div
          v-if="topoData.appDom.serverAssets.total > 0"
          class="count-radius count-radius-service"
          :title="topoData.appDom.serverAssets.total"
          @click="handleCount(topoData.appDom.id,topoData.appDom.serverAssets.assetType)"
        >
          {{ topoData.appDom.serverAssets.total>999?'999+':topoData.appDom.serverAssets.total }}
        </div>
      </div>
    </div>
    <!--   右上边框  -->
    <div
      :class="[
        'content-rt',
        status.extDomStatus != 'none' ? status.extDomStatus : '',
      ]"
    >
      <div class="title-wk">
        <span class="title">对外服务域</span>
        <el-popover
          v-if="status.extDomStatus != 'none'"
          placement="top"
          trigger="hover"
        >
          <PopoverStatus
            :data="labelStatus"
            :status="status.extDomStatus"
          ></PopoverStatus>

          <div slot="reference" class="conSpan">
            <i
              :class="[
                'el-icon-warning',
                'icon-warning-' + status.extDomStatus,
              ]"
            ></i>
          </div>
        </el-popover>
      </div>
      <div class="count" v-if="topoData.extDom">
        <div
          v-if="topoData.extDom.softAssets.total > 0"
          class="count-radius count-radius-soft"
          :title="topoData.extDom.softAssets.total"
          @click="handleCount(topoData.extDom.id,topoData.extDom.softAssets.assetType)"
        >
          {{ topoData.extDom.softAssets.total>999?'999+':topoData.extDom.softAssets.total }}
        </div>
        <div
          v-if="topoData.extDom.securityAssets.total > 0"
          class="count-radius count-radius-safe"
          :title="topoData.extDom.securityAssets.total"
          @click="handleCount(topoData.extDom.id,topoData.extDom.securityAssets.assetType)"
        >
          {{ topoData.extDom.securityAssets.total>999?'999+':topoData.extDom.securityAssets.total }}
        </div>
        <div
          v-if="topoData.extDom.serverAssets.total > 0"
          class="count-radius count-radius-service"
          :title="topoData.extDom.serverAssets.total"
          @click="handleCount(topoData.extDom.id,topoData.extDom.serverAssets.assetType)"
        >
          {{ topoData.extDom.serverAssets.total>999?'999+':topoData.extDom.serverAssets.total }}
        </div>
      </div>
    </div>
    <!--   右下边框  -->
    <div
      :class="[
        'content-rb',
        status.outDomStatus != 'none' ? status.outDomStatus : '',
      ]"
    >
      <div class="title-wk">
        <span class="title">院外用户终端域</span>
        <el-popover
          v-if="status.outDomStatus != 'none'"
          placement="top"
          trigger="hover"
        >
          <PopoverStatus
            :data="labelStatus"
            :status="status.outDomStatus"
          ></PopoverStatus>

          <div slot="reference" class="conSpan">
            <i
              :class="[
                'el-icon-warning',
                'icon-warning-' + status.outDomStatus,
              ]"
            ></i>
          </div>
        </el-popover>
      </div>
      <div class="count" v-if="topoData.outDom">
        <!--          -->
        <div
          v-if="
            topoData.outDom.hostAssets && topoData.outDom.hostAssets.total > 0
          "
          class="count-radius count-radius-zd"
          :title="topoData.outDom.hostAssets.total"
          @click="handleCount(topoData.outDom.id,topoData.outDom.hostAssets.assetType)"
        >
          {{ topoData.outDom.hostAssets.total>999?'999+':topoData.outDom.hostAssets.total }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topo from "./Topo";
import PopoverStatus from "@/components/common/PopoverStatus";

export default {
  name: "TopoContent",
  components: { topo, PopoverStatus },
  props: {
    topoData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      canvasWidth: 0,
      canvasHeight: 0,
      status: {
        secDomStatus: "none",
        appDomStatus: "none",
        extDomStatus: "none",
        insDomStatus: "none",
        outDomStatus: "none",
      },
      labelStatus: [
        { label: "特别重大", value: "levelSpMajor" },
        { label: "重大", value: "levelMajor" },
        { label: "较大", value: "levelMore" },
        { label: "一般", value: "levelCommonly" },
      ],
    };
  },
  watch: {
    topoData: {
      handler(newVal) {
        // 安全管理域
        if (
          newVal.secDom.serverAssets.levelSpMajor > 0 ||
          newVal.secDom.securityAssets.levelSpMajor > 0
        ) {
          this.status.secDomStatus = "levelSpMajor";
        } else if (
          newVal.secDom.serverAssets.levelMajor > 0 ||
          newVal.secDom.securityAssets.levelMajor > 0
        ) {
          this.status.secDomStatus = "levelMajor";
        } else if (
          newVal.secDom.serverAssets.levelMore > 0 ||
          newVal.secDom.securityAssets.levelMore > 0
        ) {
          this.status.secDomStatus = "levelMore";
        } else if (
          newVal.secDom.serverAssets.levelCommonly > 0 ||
          newVal.secDom.securityAssets.levelCommonly > 0
        ) {
          this.status.secDomStatus = "levelCommonly";
        } else {
          this.status.secDomStatus = "none";
        }
        //   应用资源
        if (
          newVal.appDom.serverAssets.levelSpMajor > 0 ||
          newVal.appDom.securityAssets.levelSpMajor > 0 ||
          newVal.appDom.softAssets.levelSpMajor > 0
        ) {
          this.status.appDomStatus = "levelSpMajor";
        } else if (
          newVal.appDom.serverAssets.levelMajor > 0 ||
          newVal.appDom.securityAssets.levelMajor > 0 ||
          newVal.appDom.softAssets.levelMajor > 0
        ) {
          this.status.appDomStatus = "levelMajor";
        } else if (
          newVal.appDom.serverAssets.levelMore > 0 ||
          newVal.appDom.securityAssets.levelMore > 0 ||
          newVal.appDom.softAssets.levelMore > 0
        ) {
          this.status.appDomStatus = "levelMore";
        } else if (
          newVal.appDom.serverAssets.levelCommonly > 0 ||
          newVal.appDom.securityAssets.levelCommonly > 0 ||
          newVal.appDom.softAssets.levelCommonly > 0
        ) {
          this.status.appDomStatus = "levelCommonly";
        } else {
          this.status.appDomStatus = "none";
        }
        //   对外服务
        if (
          newVal.extDom.serverAssets.levelSpMajor > 0 ||
          newVal.extDom.securityAssets.levelSpMajor > 0 ||
          newVal.extDom.softAssets.levelSpMajor > 0
        ) {
          this.status.extDomStatus = "levelSpMajor";
        } else if (
          newVal.extDom.serverAssets.levelMajor > 0 ||
          newVal.extDom.securityAssets.levelMajor > 0 ||
          newVal.extDom.softAssets.levelMajor > 0
        ) {
          this.status.extDomStatus = "levelMajor";
        } else if (
          newVal.extDom.serverAssets.levelMore > 0 ||
          newVal.extDom.securityAssets.levelMore > 0 ||
          newVal.extDom.softAssets.levelMore > 0
        ) {
          this.status.extDomStatus = "levelMore";
        } else if (
          newVal.extDom.serverAssets.levelCommonly > 0 ||
          newVal.extDom.securityAssets.levelCommonly > 0 ||
          newVal.extDom.softAssets.levelCommonly > 0
        ) {
          this.status.extDomStatus = "levelCommonly";
        } else {
          this.status.extDomStatus = "none";
        }
        //   院内用户终端
        if (newVal?.insDom?.hostAssets?.levelSpMajor > 0) {
          this.status.insDomStatus = "levelSpMajor";
        } else if (newVal?.insDom?.hostAssets?.levelMajor > 0) {
          this.status.insDomStatus = "levelMajor";
        } else if (newVal?.insDom?.hostAssets?.levelMore > 0) {
          this.status.insDomStatus = "levelMore";
        } else if (newVal?.insDom?.hostAssets?.levelCommonly > 0) {
          this.status.insDomStatus = "levelCommonly";
        } else {
          this.status.insDomStatus = "none";
        }
        //  院外用户终端
        if (newVal?.outDom?.hostAssets?.levelSpMajor > 0) {
          this.status.outDomStatus = "levelSpMajor";
        } else if (newVal?.outDom?.hostAssets?.levelMajor > 0) {
          this.status.outDomStatus = "levelMajor";
        } else if (newVal?.outDom?.hostAssets?.levelMore > 0) {
          this.status.outDomStatus = "levelMore";
        } else if (newVal?.outDom?.hostAssets?.levelCommonly > 0) {
          this.status.outDomStatus = "levelCommonly";
        } else {
          this.status.outDomStatus = "none";
        }
      },
    },
  },
  computed: {
    dataDom: {
      get() {
        return this.topoData;
      },
      set(value) {
        if (
          value.secDom.serverAssets.levelSpMajor > 0 ||
          value.secDom.securityAssets.levelSpMajor > 0
        ) {
          this.status.secDomStatus = "levelSpMajor";
        } else if (
          value.secDom.serverAssets.levelMajor > 0 ||
          value.secDom.securityAssets.levelMajor > 0
        ) {
          this.status.secDomStatus = "levelMajor";
        } else if (
          value.secDom.serverAssets.levelMore > 0 ||
          value.secDom.securityAssets.levelMore > 0
        ) {
          this.status.secDomStatus = "levelMore";
        } else if (
          value.secDom.serverAssets.levelCommonly > 0 ||
          value.secDom.securityAssets.levelCommonly > 0
        ) {
          this.status.secDomStatus = "levelCommonly";
        }
      },
    },
  },
  methods: {
    handleCount(id,type) {
      this.$emit("handleCount", {id,type});
    },
    initSize() {
      let self = this;
      window.onresize = function () {
        this.canvasWidth = self.$refs.container.clientWidth;
        this.canvasHeight = self.$refs.container.clientHeight;
      };
    },
  },
};
</script>

<style lang="scss" scoped>
@media screen and (max-device-width:1920px) {
  .container{
    // margin-left:1.5%;
  }
  
}
.container {
  width: 800px;
  height: 100%;
  position: relative;
  margin:1rem auto 0;
  

  .topo {
    position: relative;
    z-index: 1;
  }

  .top {
    position: absolute;
    width: 20%;
    height: 8%;
    text-align: center;
    top: -1rem;
    left: 40%;
    background: url("~@/assets/images/comprehensiveSituation/shape-cloud.png")
      no-repeat 0 0;
    background-size: 100% 100%;

    h4 {
      height: 100%;
      line-height: 2.4rem;
      vertical-align: center;
    }
  }

  .line {
    position: absolute;
    height: 0.8rem;
    width: 2px;
    background: rgba(59, 139, 255, 0.6);
    top: 5%;
    left: 50%;
  }

  .content-c {
    position: absolute;
    height: 276px;
    width: 320px;
    background: rgba(59, 139, 255, 0.2);
    border: 1px solid rgba(59, 139, 255, 0.5);
    border-radius: 6px;
    top: 30px;
    left: 230px;
  }

  .content-cb {
    position: absolute;
    height: 100px;
    width: 320px;
    background: rgba(59, 139, 255, 0.2);
    border: 1px solid rgba(59, 139, 255, 0.5);
    border-radius: 6px;
    top: 310px;
    left: 230px;

    .count-radius {
      position: absolute;
      left: 210px;
      z-index: 10;
    }
  }

  .content-lt {
    position: absolute;
    height: 156px;
    width: 200px;
    background: rgba(59, 139, 255, 0.2);
    border: 1px solid rgba(59, 139, 255, 0.5);
    border-radius: 6px;
    top: 30px;
    left: 0px;

    .count-radius-service {
      left: 30px;
      top: 0px;
    }

    .count-radius-safe {
      left: 30px;
      top: 60px;
    }
  }

  .content-lb {
    position: absolute;
    height: 220px;
    width: 200px;
    background: rgba(59, 139, 255, 0.2);
    border: 1px solid rgba(59, 139, 255, 0.5);
    border-radius: 6px;
    top: 190px;
    left: 0px;

    .count-radius-soft {
      left: 30px;
      top: 0px;
    }

    .count-radius-safe {
      left: 30px;
      top: 60px;
    }

    .count-radius-service {
      left: 30px;
      top: 130px;
    }
  }

  .content-rt {
    position: absolute;
    height: 220px;
    width: 220px;
    background: rgba(59, 139, 255, 0.2);
    border: 1px solid rgba(59, 139, 255, 0.5);
    border-radius: 6px;
    top: 30px;
    right: 0px;

    .count-radius-soft {
      right: 30px;
      top: 0px;
    }

    .count-radius-safe {
      right: 30px;
      top: 60px;
    }

    .count-radius-service {
      right: 30px;
      top: 120px;
    }
  }

  .content-rb {
    position: absolute;
    height: 150px;
    width: 220px;
    background: rgba(59, 139, 255, 0.2);
    border: 1px solid rgba(59, 139, 255, 0.5);
    border-radius: 6px;
    top: 260px;
    right: 0px;

    .count-radius-zd {
      right: 30px;
      top: 50px;
    }
  }

  .title-wk {
    position: relative;
    z-index: 2;
    padding-right: 1rem;
    display: flex;
    align-items: center;

    .title {
      width: 30%;
      flex: 1;
      display: inline-block;
      padding: 0.4rem 1rem;
      text-align: left;
      background-image: linear-gradient(
        -89deg,
        rgba(59, 139, 255, 0) 0%,
        rgba(59, 139, 255, 0.6) 100%
      );
    }
  }

  .levelSpMajor {
    border: 1px solid #fe3535 !important;
    background: rgba(255, 53, 53, 0.2);

    .title {
      background-image: linear-gradient(
        -89deg,
        rgba(255, 53, 53, 0) 0%,
        rgba(255, 53, 53, 0.6) 100%
      ) !important;
    }
  }

  .levelMajor {
    border: 1px solid #21ffeb !important;
    background: rgba(0, 225, 228, 0.2) !important;

    .title {
      background-image: linear-gradient(
        -89deg,
        rgba(0, 225, 228, 0) 0%,
        rgba(0, 225, 228, 0.6) 100%
      ) !important;
    }
  }

  .levelMore {
    border: 1px solid #ffcf2f !important;
    background: rgba(255, 207, 47, 0.2) !important;

    .title {
      background-image: linear-gradient(
        -89deg,
        rgba(255, 207, 47, 0) 0%,
        rgba(255, 207, 47, 0.6) 100%
      ) !important;
    }
  }

  .levelCommonly {
    border: 1px solid #3b8bff !important;
    background: rgba(59, 139, 255, 0.2) !important;

    .title {
      background-image: linear-gradient(
        -89deg,
        rgba(59, 139, 255, 0) 0%,
        rgba(59, 139, 255, 0.6) 100%
      ) !important;
    }
  }

  // 特别重大
  .icon-warning-levelSpMajor {
    color: #fe3535;
  }

  //比较重大
  .icon-warning-levelMajor {
    color: #21ffeb;
  }

  // 重大
  .icon-warning-levelMore {
    color: #ffcf2f;
  }

  // 一般
  .icon-warning-levelCommonly {
    color: #3b8bff;
  }

  .count {
    position: absolute;
    width: 100%;
    heigbht: 100%;
    cursor: pointer;
  }

  .count-radius {
    position: absolute;
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    border-radius: 50%;
    background: #3b8bff;
    color: #fff;
    z-index: 10;
  }
}
</style>
